import React, { Component } from 'react';
import "./style.css"
// 引入动画库
import { CSSTransition } from 'react-transition-group'

class Animation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true
    }
    this.toToggole = this.toToggole.bind(this)
  }
  render() {
    return (
      <>
        <button onClick={this.toToggole}>点击</button>
        {/* <div className={this.state.isShow ? 'show' : 'hide'}>hello，树先生</div> */}
        {/* unmountOnExit => 元素退场时，自动把 DOM 也删除 */}
        <CSSTransition
          in={this.state.isShow}
          timeout={2000}
          classNames="group"
          unmountOnExit
        >
          <div>Hello，树先生</div>
        </CSSTransition>
      </>
    );
  }

  // 显示/隐藏
  toToggole() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
}

export default Animation;